<template>
  <div class="roomState">
    <div class="state">
      <b>已入住：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
      <div class="color1"></div>
      <b>打扫中：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
      <div class="color2"></div>
      <b>空闲：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
      <div class="color3"></div>
      <b>待入住：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
      <div class="color4"></div>
      <div>
        <el-button
          type="primary"
          style="margin: 10px 10px"
          @click="confirmCheckin"
        >
          入住付费</el-button
        >
      </div>
    </div>
    <div class="w">
      <div class="floor">
        <div class="textbox">一楼</div>
        <div class="textbox">二楼</div>
        <div class="textbox">三楼</div>
      </div>
      <div class="roomcontainer">
        <span class="roombox">
          <div
            class="card"
            @click="handleClick(Item)"
            v-for="Item in Firstfloor"
            :key="Item.roomId"
            :class="[
              Item.roomState == '打扫中' ? 'cleaning' : '',
              Item.roomState == '已入住' ? 'occupied' : '',
              Item.roomState == '空闲' ? 'empty' : '',
              Item.roomState == '待入住' ? 'register' : ''
            ]"
          >
            <p>{{ Item.roomType.roomTypeName }}</p>
            <h4>{{ Item.roomNo }}</h4>
          </div>
        </span>
        <span class="roombox">
          <div
            class="card"
            @click="handleClick(Item)"
            v-for="Item in Secondfloor"
            :key="Item.roomId"
            :class="[
              Item.roomState == '打扫中' ? 'cleaning' : '',
              Item.roomState == '已入住' ? 'occupied' : '',
              Item.roomState == '空闲' ? 'empty' : '',
              Item.roomState == '待入住' ? 'register' : ''
            ]"
          >
            <p>{{ Item.roomType.roomTypeName }}</p>
            <h4>{{ Item.roomNo }}</h4>
          </div>
        </span>
        <span class="roombox">
          <div
            class="card"
            @click="handleClick(Item)"
            v-for="Item in Thirdfloor"
            :key="Item.roomId"
            :class="[
              Item.roomState == '打扫中' ? 'cleaning' : '',
              Item.roomState == '已入住' ? 'occupied' : '',
              Item.roomState == '空闲' ? 'empty' : '',
              Item.roomState == '待入住' ? 'register' : ''
            ]"
          >
            <p>{{ Item.roomType.roomTypeName }}</p>
            <h4>{{ Item.roomNo }}</h4>
          </div>
        </span>
      </div>
    </div>
    <el-dialog
      title="请选择需要的操作"
      :visible.sync="dialogchooseVisible"
      width="25%"
    >
      <el-button type="primary" @click="handleEdit">修改状态</el-button>
      <el-button type="primary" @click="handleCheckIn" :disabled="flag"
        >办理入住</el-button
      >
    </el-dialog>
    <el-dialog title="办理入住" :visible.sync="dialogcheckVisible" width="55%">
      <div class="abc">
        <div>
          <el-button type="primary" @click="handleAddCustomer"
            >添加入住人信息</el-button
          >
        </div>
        <div>
          <el-button type="danger" style="margin-top: 20px" @click="removeCache"
            >清除缓存</el-button
          >
        </div>
        <div class="efg">
          <b>当前房间：</b>
          {{ roomtips }}
          <b>所属房型：</b>
          {{ roomTypetips }}
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="cusName" label="姓名" width="120">
        </el-table-column>
        <el-table-column
          prop="cusIdcard"
          label="身份证号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="cusTel" label="电话号码" width="120">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120">
        </el-table-column>
      </el-table>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :inline="true"
        style="margin-top:40px"
        :rules="rules"
      >
        <el-form-item label="入住时间" prop="checkinDate">
          <el-col :span="11">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.checkinDate"
              type="datetime"
              placeholder="入住日期"
              style="width: 90%"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="2">——</el-col>
          <el-col :span="11">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.checkoutDate"
              type="datetime"
              placeholder="预计退房日期"
              style="width: 90%"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <i class="el-icon-refresh" @click="getroomPrice"></i>
        <b>房费：</b>
        {{ cost }}
        <el-form-item label="押金" prop="cashPledge">
          <el-input v-model="form.cashPledge" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="payWay">
          <el-radio-group v-model="form.payWay">
            <el-radio label="现金"></el-radio>
            <el-radio label="银行卡"></el-radio>
            <el-radio label="微信"></el-radio>
            <el-radio label="支付宝"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="CheckInSubmit">确定</el-button>
    </el-dialog>

    <el-dialog
      title="编辑房间状态"
      :visible.sync="dialogeditVisible"
      width="30%"
    >
      <div>
        <el-tag style="margin-right: 10px">房间状态</el-tag>
        <el-select
          v-model="queryParams.roomState"
          placeholder="请选择房间状态"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="item in roomstateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogeditVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="Updateroom"
          @keydown.enter.native="Updateroom"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="添加入住人信息"
      :visible.sync="dialogaddVisible"
      width="65%"
    >
      <el-button @click="addCus" type="primary">添加入住人</el-button>
      <CustomerInfoView
        v-for="(item, index) in cus"
        :key="index"
        @deleteIndex="deleteCustomer"
        :index="index"
        :item="item"
        style="width:70%"
      >
      </CustomerInfoView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="SubmitAdd"
          @keydown.enter.native="SubmitAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomerInfoView from "../components/CustomerInfo.vue";
import { addCheckinCusInfo } from "../api/customer.js";
import { listRoom, editRoom } from "../api/room.js";
import {
  addCheckinInfo,
  returnCusList,
  getPrice,
  confirmInsert,
  removeAllCache
} from "../api/checkin";
export default {
  name: "roomState",
  components: {
    CustomerInfoView
  },
  data() {
    return {
      rules: {
        checkinDate: [
          { required: true, message: "请选择入住时间", trigger: "blur" }
        ],
        cashPledge: [
          { required: true, message: "请输入押金", trigger: "blur" }
        ],
        payWay: [{ required: true, message: "请选择支付方式", trigger: "blur" }]
      },

      flag: false,
      a: 0,
      b: 0,
      c: 0,
      loading: false,
      //查询参数
      queryParams: {
        roomId: undefined,
        roomNo: undefined,
        roomTypeId: undefined,
        roomState: undefined
      },
      //待入住人员
      tableData: [],
      //所有房间
      roomData: [],
      //一楼
      Firstfloor: [],
      //二楼
      Secondfloor: [],
      //三楼
      Thirdfloor: [],
      cus: [{}],
      //顾客信息列表
      multipleSelection: [],
      list: {},
      dialogchooseVisible: false,
      dialogcheckVisible: false,
      dialogeditVisible: false,
      dialogaddVisible: false,
      //房价
      cost: undefined,
      //当前房间提示
      roomtips: undefined,
      //当前房型提示
      roomTypetips: undefined,
      form: {
        roomId: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        payWay: undefined,
        cashPledge: undefined,
        remark: undefined
      },
      roomstateOptions: [
        {
          value: "打扫中",
          label: "打扫中"
        },
        {
          value: "空闲",
          label: "空闲"
        },
        {
          value: "已入住",
          label: "已入住"
        },
        {
          value: "待入住",
          label: "待入住"
        }
      ]
    };
  },
  watch: {
    "form.checkoutDate": {
      handler: function() {
        if (this.form.checkoutDate != null) {
          getPrice(this.form)
            .then(resp => {
              if (resp.data.code == "200") {
                this.cost = resp.data.data;
              }
            })
            .catch(error => {
              // 错误分为 status-请求错误 和 code-账号密码错误
              this.$message.error(error);
              console.log(error);
            });
        }
      }
      // //初次加载时执行
      // immediate: true,
      // //深度监听
      // deep: true
    }
  },
  mounted() {
    this.getRoom();
    this.Classify();
  },
  methods: {
    //获取数据
    getRoom() {
      listRoom(this.queryParams)
        .then(resp => {
          if (resp.data.code == "200") {
            this.roomData = resp.data.data; //api读取数据
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //根据首位数字将所有房间分类
    Classify() {
      listRoom(this.queryParams)
        .then(resp => {
          if (resp.data.code == "200") {
            this.roomData = resp.data.data;
            for (var i = 0; i < this.roomData.length; i++) {
              if (parseInt(Number(this.roomData[i].roomNo) / 100) == 1) {
                this.Firstfloor[this.a] = this.roomData[i];
                //  this.Firstfloor[this.a]=JSON.parse(JSON.stringify(this.roomData[i]));
                this.a++;
              } else if (parseInt(Number(this.roomData[i].roomNo) / 100) == 2) {
                this.Secondfloor[this.b] = this.roomData[i];
                // this.Secondfloor[this.b]=JSON.parse(JSON.stringify(this.roomData[i]));
                this.b++;
              } else if (parseInt(Number(this.roomData[i].roomNo) / 100) == 3) {
                this.Thirdfloor[this.c] = this.roomData[i];
                this.c++;
              }
            }
            //深拷贝，将json对象序列化再反序列化还原，解决一个很恶心的错误
            this.Firstfloor = JSON.parse(JSON.stringify(this.Firstfloor));
            this.Secondfloor = JSON.parse(JSON.stringify(this.Secondfloor));
            this.Thirdfloor = JSON.parse(JSON.stringify(this.Thirdfloor));
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //添加入住人
    handleAddCustomer() {
      this.dialogaddVisible = true;
    },
    addCus() {
      this.cus.push({});
    },
    deleteCustomer(index) {
      if (index !== 0) {
        this.cus.splice(index, 1);
      }
    },
    //提交添加
    SubmitAdd() {
      addCheckinCusInfo(this.cus)
        .then(resp => {
          if (resp.data.code == "200") {
            this.$message.success("添加成功");
            this.dialogaddVisible = false;
            this.resetcus();
          } else {
            this.$message.error(resp.data);
          }
          this.gettableData();
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      // >>>>>>> Stashed changes
    },
    resetcus() {
      this.cus = [{}];
    },
    handleClick(Item) {
      this.form.roomId = Item.roomId;
      Object.assign(this.queryParams, Item);
      if (
        Item.roomState == "打扫中" ||
        Item.roomState == "已入住" ||
        Item.roomState == "待入住"
      ) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      this.dialogchooseVisible = true;
    },
    handleEdit() {
      this.dialogchooseVisible = false;
      this.dialogeditVisible = true;
    },
    //办理入住
    handleCheckIn() {
      this.dialogchooseVisible = false;
      this.dialogcheckVisible = true;
      this.gettableData();
    },
    gettableData() {
      //获取当前点击的房间id
      this.form.multipleSelection = this.multipleSelection;
      returnCusList(this.form)
        .then(resp => {
          //给右上角房间号房型名称提示赋值
          this.roomtips = resp.data.data.roomNo;
          this.roomTypetips = resp.data.data.roomTypeName;
          if (resp.data.code == "200") {
            this.tableData = resp.data.data.checkinCusInforVos;
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          //给右上角房间号房型名称提示赋值
          this.roomtips = error.data.roomNo;
          this.roomTypetips = error.data.roomTypeName;
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    CheckInSubmit() {
      this.dialogcheckVisible = false;
      // //重新获取勾选的待入住人
      this.form.multipleSelection = this.multipleSelection;
      addCheckinInfo(this.form)
        .then(resp => {
          if (resp.data.code == "200") {
            this.$message({
              type: "success",
              message: "提交成功!"
            });
            location.reload();
          } else {
            this.$message.error(resp.data);
          }
          this.resetform();
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //清空缓存
    removeCache() {
      removeAllCache()
        .then(resp => {
          if (resp.data.code == "200") {
            this.$message.success(resp.data);
            location.reload();
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //入住付费
    confirmCheckin() {
      confirmInsert()
        .then(resp => {
          if (resp.data.code == "200") {
            this.$message({
              type: "success",
              message: "入住成功!"
            });
            location.reload();
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getroomPrice() {
      getPrice(this.form)
        .then(resp => {
          if (resp.data.code == "200") {
            this.cost = resp.data.data;
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //重置queryParams
    resetqueryParams() {
      this.queryParams = {
        roomId: undefined,
        roomNo: undefined,
        roomTypeName: undefined,
        roomState: undefined
      };
    },
    //重置form
    resetform() {
      this.form = {
        roomId: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        payWay: undefined,
        cashPledge: undefined,
        remark: undefined
      };
    },

    //修改房间状态
    Updateroom() {
      editRoom(this.queryParams)
        .then(resp => {
          if (resp.data) {
            if (resp) {
              if (resp.data.code == "200") {
                this.$message.success(resp.data);
              } else {
                this.$message.error(resp.data);
              }
            } else {
              this.$message({
                type: "info",
                message: "修改失败!"
              });
            }
            this.resetqueryParams();
            this.dialogeditVisible = false;
            this.getRoom();
            location.reload();
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    }
  }
};
</script>
<style>
.w {
  float: left;
  width: 1200px;
  height: 560px;
  display: flex;
}
.floor {
  margin: 20px;
  width: 170px;
  height: 550px;
}
.textbox {
  font-family: "幼圆";
  font-size: 20px;
  margin: 25px 10px 0px 10px;
  width: 150px;
  height: 150px;
  text-align: center;
}
.roomcontainer {
  margin: 20px 10px;
  width: 900px;
  height: 550px;
}
.roombox {
  display: flex;
  width: 880px;
  height: 170px;
  margin: 10px;
}
.cleaning {
  background-color: rgb(77, 243, 207);
  text-align: center;
  border-radius: 8px;
  display: block;
  margin: 10px;
  padding: 0px;
  width: 85px;
  height: 85px;
}
.occupied {
  background-color: rgb(248, 115, 105);
  text-align: center;
  border-radius: 8px;
  display: block;
  margin: 10px;
  padding: 0px;
  width: 85px;
  height: 85px;
}
.empty {
  background-color: rgb(185, 209, 187);
  text-align: center;
  border-radius: 8px;
  display: block;
  margin: 10px;
  padding: 0px;
  width: 85px;
  height: 85px;
}
.register {
  background-color: rgb(240, 249, 140);
  text-align: center;
  border-radius: 8px;
  display: block;
  margin: 10px;
  padding: 0px;
  width: 85px;
  height: 85px;
}
.card {
  text-align: center;
  border-radius: 8px;
  display: block;
  margin: 10px;
  padding: 0px;
  width: 85px;
  height: 85px;
}
span :hover {
  -webkit-box-shadow: #999 0px 0px 8px;
  -moz-box-shadow: #999 0px 0px 8px;
  box-shadow: #999 0px 0px 8px;
}
.p {
  font-size: 10px;
}
.state {
  display: flex;
  position: relative;
  height: 20px;
  text-align: center;
  padding-top: 20px;
}

.color1 {
  position: absolute;
  left: 60px;
  height: 35px;
  width: 35px;
  background-color: rgb(248, 115, 105);
}
.color2 {
  position: absolute;
  left: 155px;
  height: 35px;
  width: 35px;
  background-color: rgb(77, 243, 207);
}
.color3 {
  position: absolute;
  left: 235px;
  height: 35px;
  width: 35px;
  background-color: rgb(185, 209, 187);
}
.color4 {
  position: absolute;
  left: 335px;
  height: 35px;
  width: 35px;
  background-color: rgb(240, 249, 140);
}
.abc {
  display: flex;
  align-items: center;
}
.efg {
  flex: 1;
  text-align: right;
}
</style>
